import React, {Component} from 'react';
import {StyleSheet, Text, View, ScrollView, ActivityIndicator, Image, FlatList, RefreshControl} from 'react-native';
import {Flex, WhiteSpace, List, Toast, wrap, Badge, SearchBar} from '@ant-design/react-native';
import {getOwnerInfo} from '~/api/owner';
import {getBalanceList} from '~/api/cost';
import {GetCompanyInfo} from '~/api/company';
import {GetBalanceList} from '~/api/cost';
const Item = List.Item;
import {connect} from 'react-redux';
import {getMsgList} from '~/api/message';
import moment from 'moment';
let pagecount = 0;
let index = 1;
let size = 10;
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};

class Mywallet extends Component {
    static navigationOptions = {
        title: '我的钱包',
    };
    constructor(props) {
        super(props);
        // console.log(this.props.userinfo.identity);
        this.state = {
            Total: 0,
            Balance: 0,
            balanceType: 81,
            userID: 0,
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            condidate: {},
            list: [],
        };
        console.log(this.props.userinfo.identity);
        this.getinfo();
        this.getlist();
    }
    getinfo() {
        if (this.props.userinfo.identity === 8) {
            getOwnerInfo().then((r) => {
                if (r.code === 0) {
                    this.setState({
                        Balance: r.data.Balance,
                    });
                } else {
                    Toast.info('失败', 1);
                }
            });
        } else {
            GetCompanyInfo(this.props.userinfo.company).then((r) => {
                if (r.code === 0) {
                    this.setState({
                        Balance: r.data.Balance,
                    });
                } else {
                    Toast.info('失败', 1);
                }
            });
        }
    }
    getlist() {
        if (this.props.userinfo.identity === 8) {
            getBalanceList({
                balanceType: 81,
                userID: this.props.userinfo.userid,
                page_index: this.state.page_index,
                page_size: this.state.page_size,
                condidate: {},
            }).then((r) => {
                if (r.code === 0) {
                    this.setState({
                        list: r.data.list,
                        footer: 0,
                    });
                    if (this.state.page_index === 1) {
                        pagecount = r.data.total_page_count;
                        this.setState({
                            footer: r.data.total_item_count < 10 ? 2 : 0,
                        });
                    }
                } else {
                    Toast.info('失败', 1);
                }
            });
        } else {
            GetBalanceList({
                balanceType: 111,
                userID: this.props.userinfo.userid,
                page_index: this.state.page_index,
                page_size: this.state.page_size,
            }).then((r) => {
                console.log(r);
                if (r.code === 0) {
                    this.setState({
                        list: r.data.list,
                        footer: 0,
                    });
                    if (this.state.page_index === 1) {
                        pagecount = r.data.total_page_count;
                        this.setState({
                            footer: r.data.total_item_count < 10 ? 2 : 0,
                        });
                    }
                } else {
                    Toast.info('失败', 1);
                }
            });
        }
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.getlist();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    if (this.props.userinfo.identity === 8) {
                        getBalanceList({
                            balanceType: 81,
                            userID: this.props.userinfo.userid,
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                            condidate: {},
                        }).then((r) => {
                            if (r.code === 0) {
                                dataArray = r.data.list;
                                dataArray = this.state.list.concat(dataArray);
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            } else {
                                Toast.info('失败', 1);
                            }
                        });
                    } else {
                        GetBalanceList({
                            balanceType: 111,
                            userID: this.props.userinfo.userid,
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                        }).then((r) => {
                            if (r.code === 0) {
                                dataArray = r.data.list;
                                dataArray = this.state.list.concat(dataArray);
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            } else {
                                Toast.info('失败', 1);
                            }
                        });
                    }
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <List>
                <Item>
                    <Flex style={{width: '100%'}} justify="between">
                        <Text>{item.KindName}</Text>
                        {item.CostValue < 0 ? <Text>{item.CostValue}</Text> : <Text style={{color: 'red'}}>+{item.CostValue}</Text>}
                    </Flex>
                    <WhiteSpace size="lg" />
                    <Flex style={{width: '100%'}} justify="between">
                        <Text style={{color: '#9E9E9E'}}>{item.RegDateTime}</Text>
                        <Text style={{color: '#9E9E9E'}}>余额：{item.CostSum}</Text>
                    </Flex>
                </Item>
            </List>
        );
    }
    _HeaderView = () => {
        return (
            <>
                <WhiteSpace size="sm" />
                <Flex direction="column" style={{width: '100%', height: 110, backgroundColor: '#FFFFFF'}}>
                    <Flex direction="row" justify="start" align="start" style={{width: '100%', paddingTop: 18, marginLeft: 15}}>
                        <Text style={{fontSize: 15}}>总额（元）</Text>
                    </Flex>
                    <Text style={{fontSize: 24, color: 'red'}}>
                        <Text style={{fontSize: 18}}>￥</Text>
                        {this.state.Balance}
                    </Text>
                </Flex>
                <Flex
                    style={{width: '100%'}}
                    justify="center"
                    align="center"
                    onPress={() => {
                        this.props.navigation.push('Withdrawal', {Balance: this.state.Balance});
                    }}>
                    <Flex style={{backgroundColor: 'red', width: '100%', height: 44}} justify="center" align="center">
                        <Text style={{color: '#FFFFFF'}}>提现</Text>
                    </Flex>
                    {/* <Flex style={{ backgroundColor: '#F2BC38', width: '50%', height: 44 }} justify='center' align='center'>
                        <Text style={{ color: '#FFFFFF' }}>添加银行卡</Text>
                    </Flex> */}
                </Flex>
                {/* <WhiteSpace size='lg' />
                <Flex style={{ width: '100%', height: 45, backgroundColor: '#FFFFFF' }}>
                    <Text style={{ marginLeft: 16, color: '#9E9E9E' }}>我的银行卡</Text>
                </Flex>
                <View style={{ width: '100%', height: 1, backgroundColor: '#F6F6F6' }} />
                <Flex style={{ width: '100%', height: 50, backgroundColor: '#FFFFFF' }} justify='between'>
                    <Text style={{ marginLeft: 16 }}>建设银行</Text>
                    <Text style={{ marginRight: 16 }}>9966</Text>
                </Flex> */}
                <WhiteSpace size="lg" />
                <Flex style={{width: '100%', height: 45, backgroundColor: '#FFFFFF'}}>
                    <Text style={{marginLeft: 16, color: '#9E9E9E'}}>提现明细</Text>
                </Flex>
            </>
        );
    };
    render() {
        return (
            <View style={{flex: 1}}>
                <FlatList
                    data={this.state.list}
                    style={{width: '100%'}}
                    showsVerticalScrollIndicator={false}
                    renderItem={(data) => this._renderItem(data.item)}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={this._HeaderView}
                    ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                    onEndReached={() => {
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                    refreshing={true}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                />
            </View>
            // <ScrollView style={{flex: 1}}>
            //     <WhiteSpace size="sm" />
            //     <Flex direction="column" style={{width: '100%', height: 110, backgroundColor: '#FFFFFF'}}>
            //         <Flex direction="row" justify="start" align="start" style={{width: '100%', paddingTop: 18, marginLeft: 15}}>
            //             <Text style={{fontSize: 15}}>总额（元）</Text>
            //         </Flex>
            //         <Text style={{fontSize: 24, color: 'red'}}>
            //             <Text style={{fontSize: 18}}>￥</Text>
            //             {this.state.Balance}
            //         </Text>
            //     </Flex>
            //     <Flex
            //         style={{width: '100%'}}
            //         justify="center"
            //         align="center"
            //         onPress={() => {
            //             this.props.navigation.push('Withdrawal', {Balance: this.state.Balance});
            //         }}>
            //         <Flex style={{backgroundColor: 'red', width: '100%', height: 44}} justify="center" align="center">
            //             <Text style={{color: '#FFFFFF'}}>提现</Text>
            //         </Flex>
            //         {/* <Flex style={{ backgroundColor: '#F2BC38', width: '50%', height: 44 }} justify='center' align='center'>
            //             <Text style={{ color: '#FFFFFF' }}>添加银行卡</Text>
            //         </Flex> */}
            //     </Flex>
            //     {/* <WhiteSpace size='lg' />
            //     <Flex style={{ width: '100%', height: 45, backgroundColor: '#FFFFFF' }}>
            //         <Text style={{ marginLeft: 16, color: '#9E9E9E' }}>我的银行卡</Text>
            //     </Flex>
            //     <View style={{ width: '100%', height: 1, backgroundColor: '#F6F6F6' }} />
            //     <Flex style={{ width: '100%', height: 50, backgroundColor: '#FFFFFF' }} justify='between'>
            //         <Text style={{ marginLeft: 16 }}>建设银行</Text>
            //         <Text style={{ marginRight: 16 }}>9966</Text>
            //     </Flex> */}
            //     <WhiteSpace size="lg" />
            //     <Flex style={{width: '100%', height: 45, backgroundColor: '#FFFFFF'}}>
            //         <Text style={{marginLeft: 16, color: '#9E9E9E'}}>提现明细</Text>
            //     </Flex>
            //     {this.state.list.map((item) => {
            //         return (
            //             <List>
            //                 <Item>
            //                     <Flex style={{width: '100%'}} justify="between">
            //                         <Text>{item.KindName}</Text>
            //                         {item.CostValue < 0 ? <Text>{item.CostValue}</Text> : <Text style={{color: 'red'}}>+{item.CostValue}</Text>}
            //                     </Flex>
            //                     <WhiteSpace size="lg" />
            //                     <Flex style={{width: '100%'}} justify="between">
            //                         <Text style={{color: '#9E9E9E'}}>{item.RegDateTime}</Text>
            //                         <Text style={{color: '#9E9E9E'}}>余额：{item.CostSum}</Text>
            //                     </Flex>
            //                 </Item>
            //             </List>
            //         );
            //     })}
            // </ScrollView>
        );
    }
}
export default connect(mapGetter)(Mywallet);
const styles = StyleSheet.create({});
